﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/head_bottom.css">
	<link rel="stylesheet" type="text/css" href="css/shoppingCart.css">
	<title></title>
	<style>
	</style>
	<script>
		function _delete(pid,TorF){
			//1.创建xhr异步对象
			let xhr=new XMLHttpRequest();
			//4.创建监听，接收响应
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4 && xhr.status==200){
					let r=xhr.responseText;
				}
			}
			//2.创建请求，打开连接
			xhr.open("delete",`/shoping/del_cart/${pid}&${TorF}`,true);
			xhr.send();
			//设置定时函数，用于刷新网页
			setTimeout(function(){
				location.reload();
			},200);
		}
		//查询购物车数据函数
		function search_item(){
			// let _user_id=user_id.value;
			//1.创建xhr异步对象
			let xhr=new XMLHttpRequest();
			 //4.创建监听，接收响应
			   xhr.onreadystatechange=function(){
				   if(xhr.readyState==4 && xhr.status==200){
					   let r=JSON.parse(xhr.responseText);
					   let _ul='';
					   let sum_price=0;    //声明计算购物车金额的变量
					   for(let i=0;i<r.length;i++){          //循环遍历
							sum_price+=(r[i].price*r[i].count);  //总计购物车金额
							let _meals=r[i].meals_num;
							if(_meals===1){
								_meals="2-4人食用";
							}else if(_meals===2){
								_meals="5-8人食用";
							}else{
								_meals="9-15人食用";
							};
							let _but='-';                    //设置按钮默认值为-，如果商品数量为1变为删除
							if(r[i].count==1) _but="删除";
						  _ul+=`<ul id="_ull">
									<li><img id="ul_img" src="img/${r[i].sm}" alt=""></li>
									<li class="name_li">${r[i].name}</li>
									<li>￥${r[i].price}</li>
									<li>数量：${r[i].count}</li>
									<li>规格：${_meals}</li>
									<li><button id="jian" onclick="_delete(${r[i].product_id},-1)">${_but}</button></li>
									<li><button id="jia"  onclick="_delete(${r[i].product_id},1)">+</button></li>
								</ul><br>
								`;
					   }
					   _ul+=`<strong>总计：${sum_price}</strong>`;   //拼接总计金额
					   d2.innerHTML=_ul;
				   }
			   }
		   //2.创建请求，打开连接
		   xhr.open("get",`/shoping/search_item/`,true);
		   //3.发送请求
		   xhr.send();
		};
	</script>
</head>

<body onload="search_item()">
	<header id="global_header">
		<div class="fix_header">
			<div class="logo">
				<img src="img/yhxe.png" alt="">
			</div>
			<nav class="global_nav">
				<ul class="nav_ul">
					<li><a href="index.html" target="_parent" class="left">首页</a></li>
					<li><a href="category.html" id="a_cake" onclick="search_cake()" class="left">蛋糕</a></li>
					<li><a href="snacks.html" class="left">零食</a></li>
					<li><a href="#" class="left">积分兑换</a></li>
				</ul>
			</nav>
			<div class="right_content">
				<div>
					<a href="shoppingCart.html" target="_blank"><img src="img/20201214231042.png" alt=""></a>
				</div>
				<div>
					<a href="login.html" target="_blank"><img src="img/20201214230952.png" alt=""></a>
				</div>
			</div>
		</div>
	</header>
	<div style="height: 90px"></div>
	<div id="main">
		<div class="shopping">
			<h3>您的购物车</h3>

		</div>
	</div>
	<!--  页脚部分-->
	<footer>
		<div class="footer_content">
			<div class="footer_left">
				<div class="footer_nav">
					<a href="#">小e公告</a>
					<a href="#">关于小e</a>
					<a href="#">客服服务</a>
					<a href="#">食品经营许可证</a>
					<a href="#">生产许可证</a>
					<a href="#">预付费卡协议</a>
					<a href="#">联系我们</a>
				</div>
				<p class="footer-tel"><span>如有问题，请联系在线客服。工作时间：9：00-21:00</span></p>
				<div class="footer_copy">
					<p>
						<span>copyright©2010-2020 xiaoe.com版权所有</span><span>沪ICP备10211730号</span><span>沪公网安备31010402003364号</span>
					</p>
				</div>
			</div>
			<div class="footer_img">
				<table></table>
				<div class="bottom_image1"><img src="img/20201221131321.jpg" ></div>
				<div class="bottom_image2"><img src="img/20201215215306.png" ></div>
			</div>
		</div>
	</footer>
<!--	请输入用户id：<input type="text" id="user_id"><button onclick="search_item()">查询</button>-->
<!--	<div id="d1"></div><br>-->
	<div id="d2"></div>
	
</body>
</html>